<template>
  <div class="flex flex-col h-full">
    <!-- 顶部信息栏 -->
    <div class="p-4 border-b border-gray-100">
      <div class="flex justify-between items-start">
        <div class="flex items-center">
          <div class="w-12 h-12 rounded-full overflow-hidden mr-3">
            <img src="/placeholder.svg?height=100&width=100" alt="候选人头像" class="w-full h-full object-cover">
          </div>
          <div>
            <h2 class="text-lg font-medium text-gray-800">张小明</h2>
            <div class="flex items-center text-sm text-gray-500">
              <span class="mr-4">应聘：高级产品经理</span>
              <span class="mr-4">3年经验</span>
              <span>本科</span>
            </div>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <button class="px-3 py-1.5 text-primary border border-primary rounded hover:bg-primary hover:text-white transition-colors text-sm">
            查看简历
          </button>
          <button class="px-3 py-1.5 text-gray-600 border border-gray-300 rounded hover:bg-gray-50 transition-colors text-sm">
            安排面试
          </button>
        </div>
      </div>
    </div>

    <!-- 聊天内容区域 -->
    <div class="flex-1 bg-gray-50 p-4 overflow-y-auto">
      <!-- 时间标记 -->
      <div class="flex justify-center mb-4">
        <span class="bg-white text-gray-500 text-xs px-3 py-1 rounded-full shadow-sm">今天 14:30</span>
      </div>

      <!-- 消息列表 -->
      <div class="space-y-4">
        <!-- 候选人消息 -->
        <div class="flex">
          <div class="w-8 h-8 rounded-full overflow-hidden mr-3 flex-shrink-0">
            <img src="/placeholder.svg?height=100&width=100" alt="候选人" class="w-full h-full object-cover">
          </div>
          <div class="max-w-[70%]">
            <div class="bg-white rounded-lg p-3 shadow-sm">
              <p class="text-gray-800">您好，我对贵公司的高级产品经理职位很感兴趣，想了解一下具体的工作内容和团队情况。</p>
            </div>
            <div class="text-xs text-gray-400 mt-1">14:30</div>
          </div>
        </div>

        <!-- HR回复 -->
        <div class="flex justify-end">
          <div class="max-w-[70%]">
            <div class="bg-primary text-white rounded-lg p-3">
              <p>您好！感谢您对我们职位的关注。这个职位主要负责产品规划和用户体验优化，团队氛围很好。您方便明天下午来公司面试吗？</p>
            </div>
            <div class="text-xs text-gray-400 mt-1 text-right">14:35</div>
          </div>
          <div class="w-8 h-8 rounded-full overflow-hidden ml-3 flex-shrink-0">
            <img src="/placeholder.svg?height=100&width=100" alt="HR" class="w-full h-full object-cover">
          </div>
        </div>

        <!-- 系统消息 -->
        <div class="flex justify-center">
          <div class="bg-blue-50 text-blue-700 rounded-lg p-3 max-w-md text-center">
            <div class="flex items-center justify-center mb-2">
              <i class="ri-calendar-line mr-2"></i>
              <span class="font-medium">面试邀请已发送</span>
            </div>
            <div class="text-sm">
              <p>时间：明天 15:00-16:00</p>
              <p>地点：公司会议室A</p>
              <p>面试官：李经理</p>
            </div>
            <div class="mt-2 space-x-2">
              <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm">查看详情</button>
              <button class="px-3 py-1 border border-blue-600 text-blue-600 rounded text-sm">修改时间</button>
            </div>
          </div>
        </div>

        <!-- 候选人确认 -->
        <div class="flex">
          <div class="w-8 h-8 rounded-full overflow-hidden mr-3 flex-shrink-0">
            <img src="/placeholder.svg?height=100&width=100" alt="候选人" class="w-full h-full object-cover">
          </div>
          <div class="max-w-[70%]">
            <div class="bg-white rounded-lg p-3 shadow-sm">
              <p class="text-gray-800">好的，明天下午3点我会准时到达。请问需要准备什么材料吗？</p>
            </div>
            <div class="text-xs text-gray-400 mt-1">14:40</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="p-4 border-t border-gray-100 bg-white">
      <!-- 工具栏 -->
      <div class="flex items-center mb-3 space-x-3">
        <button class="p-2 text-gray-500 hover:text-gray-700 rounded">
          <i class="ri-emotion-line"></i>
        </button>
        <button class="p-2 text-gray-500 hover:text-gray-700 rounded">
          <i class="ri-image-line"></i>
        </button>
        <button class="p-2 text-gray-500 hover:text-gray-700 rounded">
          <i class="ri-file-line"></i>
        </button>
        <button class="p-2 text-gray-500 hover:text-gray-700 rounded">
          <i class="ri-calendar-line"></i>
        </button>
        <div class="flex-1"></div>
        <button class="px-3 py-1.5 text-primary border border-primary rounded hover:bg-primary hover:text-white transition-colors text-sm">
          常用回复
        </button>
      </div>
      
      <!-- 输入框 -->
      <div class="flex items-end space-x-3">
        <div class="flex-1">
          <textarea 
            v-model="newMessage"
            placeholder="输入消息内容..."
            class="w-full px-4 py-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary"
            rows="3"
            @keydown.enter.exact.prevent="sendMessage"
            @keydown.enter.shift.exact="newMessage += '\n'"
          ></textarea>
          <div class="flex justify-between items-center mt-2 text-sm text-gray-500">
            <span>按Enter发送，Shift+Enter换行</span>
            <span>{{ newMessage.length }}/500</span>
          </div>
        </div>
        <button 
          @click="sendMessage"
          :disabled="!newMessage.trim()"
          class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
        >
          <i class="ri-send-plane-line mr-1"></i>
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessagesStore } from '../stores/messages'
import type { Conversation } from '../types'

interface Props {
  conversation: Conversation
}

const props = defineProps<Props>()

const messagesStore = useMessagesStore()
const newMessage = ref('')

const sendMessage = () => {
  if (newMessage.value.trim()) {
    messagesStore.sendMessage(props.conversation.id, newMessage.value.trim())
    newMessage.value = ''
  }
}
</script>
